<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
	</head>
	<script src="../js/jquery-1.11.1.js"></script>
	<style>
		
		.imga{
			animation: dfc .8s linear infinite;
		}
		/* 关键帧 */
		@keyframes dfc{
			0%{
				transform: rotate(180deg);
			}
			30%{
				transform:rotate(360deg);
			}
			100%{
				transform:rotate(720deg);
			}
		}
		.imgb{
			animation: dfc1 .8s linear infinite;
		}
		/* 关键帧 */
		@keyframes dfc1{
			0%{
				transform: translate(20px) rotate(180deg) scale(1);
			}
			30%{
				transform:translate(230px) rotate(360deg) scale(1.2);
			}
			100%{
				transform:translate(1300px) rotate(720deg) scale(1.6);
			}
		}
	</style>
	<body>
		<img src="../img/图片2.gif" alt="1" class="imga" />
		<audio src="../img/dafengche.mp3" autoplay class="music"></audio>
		<button id="btn1">开转</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
			//点击  开转  图片切换并且添加样式 .imga
			$("#btn1").click(function(){
				$("img").attr("src","../img/dfc.jpg").addClass("imga");
			});
			
			//暂停  音乐消失+动画效果消失
			$("#btn2").click(function(){
				$("audio").removeAttr("src")
				$("img").removeClass("imga");
			});
			//翻转  切换： imga 切换 imgb
			$("#btn3").click(function(){
				$("img").toggleClass("imgb");
				$("audio").attr("src","../img/dafengche.mp3")
			});
		</script>
	</body>
</html>